<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>心动论坛页面</title>
		<link rel="stylesheet" type="text/css" href="css/top.css"/>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/通用.css"/>
		<link rel="stylesheet" type="text/css" href="css/floatLogo.css"/>

		<style type="text/css">
			/* 页面宽度大约在1540px */

			#ad img{
				width: 1520px;
				
			}
			
			.table_box{
				margin-top: 80px;
				margin-left: 200px;
			}
			
			#tab img{
				width: 240px;
				height: 110px;
			}
			
			.table .t1{
				
				border-radius: 5px;
				border:1px solid #f0f0f0 ;
				width: 240px;
				height: 135px;
			}
			.t1 span{
				display: none;
			}
			.t2{
				/*鼠标移动到图片上发生的变化 边框变化*/
				border: 1px solid darkorange;
				border-radius: 5px;
				width: 240px;
				height: 135px;
			}
			.t2  span{
				/*鼠标移动到图片的效果  出现文字*/
				/* display:none ; */
				float: left;
				width: 240px;
				border-radius: 3px;
				height: 20px;
				background-color: darkorange;
				text-align: center;
			}

		</style>
	</head>
	<body>
		<img src="img/imgmove.png" width="30px"  style="position: absolute;" id="imgmove">
		<div id="right_float" >
			<a href="index.html"><img src="img/logo.png" ></a>
		</div>
		<div>
			<div id="top">
				<div id="top_center">
					<a href="index.html"><img src="./img/logo.png" class="logo" ></a>
					<div class="top_list_box">
						<ul class="top_list">
						<li>
							<a href="index.html">首页</a>
						</li>
						<li>
							<a href="论坛.html">论坛</a>
						</li>
						<li>
							<a href="游戏.html">游戏</a>
						</li>
						<li>
							<a href="加入心动.html">加入心动</a>
						</li>
						<li>
							<a href="家长指引.html">家长指引</a>
						</li>
						<li>
							<a href="#">其他</a>
							<ul>
								<li class="lis"><a href="留言.html">留言</a></li>
								<li class="lis"><a href="pacific.html">太平洋网络</a></li>
							</ul>
						</li>
					</ul>
					</div>
					<div class="search_box">
							<input type="text" name=""  value="" class="search" placeholder="搜索" /><a href=""><img src="img/搜索按钮.png" ></a>
							
					</div>
					<a href="登录.html">登录</a> |
					<a href="注册.html">注册</a>
				</div>
			</div>
			<div id="ad">
				<img src="img/广告.jpg" >
			</div>
			<div class="table_box">
				<div style="font-size: 22px;"><div style="color: darkorange;display: inline-block;"> |
				</div> 论坛</div>
				<table border="0px" cellspacing="30px" cellpadding="0" class="table" id="tab">
					<tr>
						<td class="t1"><a href="#"><img src="img/QQ截图20211204171957.png" >
							<span>仙境守护：守护永恒的爱</span>
						</a></td>
						<td class="t1"><a href="#"><img src="img/QQ截图20211204172040.png" >
							<span>另一个伊甸 超越时空的猫</span>
						</a></td>
						<td class="t1"><a href="#"><img src="img/QQ截图20211204172643.png" >
							<span>将神</span>
						</a></td>
						<td class="t1"><a href="#"><img src="img/common_113_icon.jpg" >
							<span>完美世界II</span>
						</a></td>
					</tr>
					<tr>
						<td class="t1"><a href="#"><img src="img/common_40_icon.jpg" >
							<span>深海迷航</span>
						</a></td>
						<td class="t1"><a href="#"><img src="img/common_47_icon.jpg" >
							<span>梦幻诛仙2</span>
						</a></td>
						<td class="t1"><a href="#"><img src="img/common_88_icon.jpg" >
							<span>笑傲江湖OL</span>
						</a></td>
						<td class="t1"><a href="#"><img src="img/QQ截图20211204192253.png" >
							<span>天天打波利</span>
						</a></td>
					</tr>
					<tr>
						<td class="t1"><a href="#"><img src="img/QQ截图20211204192350.png" >
							<span>神仙道高清重制版</span>
						</a></td>
					</tr>
				</table>
			</div>
			<div class="base">
				<!-- 底部通用于所有网页 -->
				<div id="base_center">
					<table border="0px" cellspacing="20px" cellpadding="5px">
						
						<tr>
							<td>
								<a href="#">免责声明</a> |
								<a href="#">隐私政策</a> |
								<a href="#">用户协议</a> |
								<a href="#">游戏大厅</a> |
								<a href="#">论坛</a>
							</td>
							<td align="right"><img src="img/logo2.png" ></td>
						</tr>
						<tr>
							<td>学号：2403130240</td>
							<td></td>
						</tr>
						<tr>
							<td>姓名：陈奕喧</td>
							<td></td>
						</tr>
						<tr>
							<td>在线客服微信公众号：123456</td>
							<td align="right">河北互联网举报中心</td>
						</tr>
						<tr>
							<td>投诉举报邮箱：tousu@xd.com</td>
							<td align="right">网上有害信息举报专区</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			
			/*监测鼠标滑过游戏列表*/
			// var tab=document.querySelector("#tab");//返回所有的td
			var tds=tab.getElementsByTagName("td");
			for(var i=0;i<tds.length;i++){
				tds[i].onmouseover=function(){
					this.className="t2";
				}
				tds[i].onmouseout=function(){
					this.className="t1";
				}
			}
			
				//下拉列表
			var list=document.querySelector(".top_list");
			var lis=list.children;
			for(var i=0;i<lis.length;i++){
				if(lis[i].children.length=="2"){
					lis[i].addEventListener("mousemove",function(){
						this.children[1].style.display="block";
						
					});
					lis[i].addEventListener("mouseout",function(){
						this.children[1].style.display="none";
					});
				}
			}
				
			//鼠标事件
			var pic=document.getElementById("imgmove");//获取图片对象
			document.addEventListener('mousemove',function(e){//添加鼠标移动事件
				var x=e.pageX||e.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);//获取鼠标在文档中的x坐标
				var y=e.pageY||e.clientY+(document.body.scrollTop||document.documentElement.scrollTop);//获取鼠标在文档中的y坐标
				pic.style.left=x+2+"px";//第四象限
				pic.style.top=y+2+'px';
			})
			
			
			window.addEventListener('scroll',function(){//页面滚动事件
			            let top= document.getElementById("top");
			           if(window.scrollY>0)
			            {
			                top.className="bian";
			            }else{
			                top.className="top";
			            }
			        })
		</script>
	</body>
</html>
